<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<style>
			.info{
				background-color: #8A8A8A;
			}
			.info .top{
				line-height: 30px;
				height: 30px;
				color: #FFF;
			}
			.topleft{
				float: left;
				margin-left: 10px;
				font-size: 12px;
				max-width:260px ;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.topright{
				float: right;
				margin-right: 10px;
			}
			.content{
				padding: 20px;
				height: 100px;
				box-sizing: border-box;
			}
			.left,.right{
				float: left;
				width: 50%;
				color: #FFF;
				text-align: center;
			}
			.left{
				border-right: 1px solid #FFF;
				box-sizing: border-box;
				height: 100%;
			}
			.left p:nth-child(1),.right p:nth-child(1){
				font-size: 18px;
				margin: 10px 10px;
			}
			.content p.context{
				font-size: 13px;
			}
			.order .top{
				height: 36px;
				padding:0 10px;
			}
			.title{
				box-sizing: border-box;
				border-bottom: 1px solid #DDD;
				display: block;
				line-height: 36px;
				font-size: 15px;
				font-weight: bold;
			}
			.list{
				display: flex;
				align-items: center;
				height: 76px;
				width: 100%;
				border-bottom: 1px solid #DDD;
			}
			.list li{
				height: 100%;
				flex: 1;
				text-align: center;
				color: #999;
				position: relative;
			}
			.list a{
				    color: #666;
				    display: block;
				    width: 100%;
				    height: 100%;
				    font-size: 14px;
				    text-decoration: none;
			}
			.list li i{
				color: #999;
				font-size: 26px;
				display: block;
				padding-top: 15px;
				padding-bottom: 5px;
			}
			.badge{
				position: absolute;
				top: 8px;
				left: 50%;
				background-color: #FF6666;
			}
		</style>
	</head>
	<body>
		<header class="header">
			<h1>上门宝超市-供应商中心</h1>
		</header>
		<div id="app">
			<section class="info">
				<h2 style="display: none;">昨日信息</h2>
				<div class="top">
					<div class="topleft">
						你好， {{name}}
					</div>
					<div onclick="notice()" class="topright">
						<i class="fa fa-commenting"></i>
					</div>
				</div>
				<div class="content">
					<a class="left" href="">
						<p>{{num}}个</p>
						<p class="context">昨日零库存商品</p>
					</a>
					<a class="right" href="/index/sale">
						<p>{{money}}元</p>
						<p class="context">昨日商品销售</p>
					</a>
				</div>	
			</section>
			<section class="order">
				<h2 style="display: none;">订单</h2>
				<div class="top">
					<h3 class="title">我的订单</h3>
				</div>
				<ul class="list">
					<li v-for="list in lists"><a :href="list.href"><i class="fa" :class="list.icon"></i>{{list.name}}<span class="badge">{{list.num}}</span></a></li>
				</ul>
				<div class="top">
					<h3 class="title">我的服务</h3>
				</div>
				<ul class="list">
					<li><a href="/index/show_goods"><i class="fa fa-cubes"></i>查看商品</a></li>
					<li><a href="/index/change_price"><i class="fa fa-outdent"></i>调价申请</a></li>
					<li><a href="/index/sale"><i class="fa fa-cny"></i>销售统计</a></li>
					<li><a href="/index/accounts"><i class="fa fa-files-o"></i>财务对账</a></li>
				</ul>
			</section>
			<footer class="footer">
				<ul>
					<li><a href="/" class="active"><i class="fa fa-home"></i>首页</a></li>
					<li><a href="/index/user"><i class="fa fa-user"></i>个人</a></li>
				</ul>
			</footer>
		</div>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					name:'',
					num:'',
					money:'',
					lists:[{href:"/index/neworder",name:"新订单",num:"",icon:"fa-file-text-o"},{href:"/index/delivery",name:"待发货",num:"",icon:"fa-inbox"},{href:"/index/receipt",name:"待收货",num:"",icon:"fa-truck"},{href:"/index/arrived",name:"已完成",num:"",icon:"fa-check-square"},{href:"/index/cancel",name:"已取消",num:"",icon:"fa-frown-o"}]
				},
				created:function(){
					    this.$http.get('/supinfo/info').then(function (res) {
							console.log(res.data);
                            this.name = res.data.data.supplier_name;
			                 this.num = res.data.data.zero_stocks_count?res.data.data.zero_stocks_count:0;
			                 this.money = res.data.data.sale_count;
			                 for(var i in res.data.data.nums){

                               if (res.data.data.nums[i] == 0) {
                                    this.lists[i].num = "";
                                } else {
                                    this.lists[i].num = res.data.data.nums[i];
                                }
                              }

			              },function (res) {
								this.error(res);
			              });
				},
				computed:{
					time:function(){
						var date = new Date();
						var time = date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate();
						return time;
					}
				},
				methods:{
					error:function(res){
						console.log("错误类型:"+res.status,"错误描述:"+res.statusText);
					}
				}
			});

			function notice(){
			    window.location.href="index/notice";
			}
		</script>
	</body>
</html>
